
import React, {useState, ChangeEvent, useEffect} from 'react';
import Context from './Context'
import ReducerDemo from './Reducer'
import Redux from './Redux/Redux'
import UseMemo from './UseMemo/index'




function Hooks(props) {
    const [count, setCount] = useState(0)
 /**
   * 副作用：手动更改DOM，数据获取，设置订阅都称为副作用。分为需要清理和不清理的。比如网络请求，DOM更改，日志这些副作用都不要清理。
   * useEffect(effectCallback: () => void, deps: any[]) 接收两个参数，第二个参数依赖项是可选的，表示这个 effect 要依赖哪些值。
   * 有时候我们并不想每次渲染 effect 都执行，只有某些值发生变化才去执行 effect，这个时候我们可以指定这个 effect 的依赖列表，可以是一个也可以几个，当其中列表中的某一个值发生变化，effect 才会执行。
   * 第一个参数的返回值，会在组件卸载时执行，相当于 componentWillUnmount，可以清理定时器，移除事件监听，取消一些订阅。
   * 当第二个参数为一个空数组时，相当于 componentDidMount 和 componentWillUnmount，表明这个 effect 没有任何依赖，只在首次渲染时执行。
   */
  /**
   * 简单的说，就是使用useEffect代替生命周期函数；
   */
    useEffect(() => {
        document.title=`You clicked${count} times`
        return () => {
          console.log('==========')
        }
      }, [count])

    return (
        <div>
            <p>You clicked {count} times</p>
              <button onClick={() => setCount(count+1)}>
              click me!
              </button>
            <UserForm />

            <button onClick={() => {props.history.push('/home')}}>点击去往home，测试willunmount接触副作用方法</button>
            <Context />
            <ReducerDemo />
            <hr/>
            <Redux />
            <hr />
            <UseMemo />
        </div>
    )
}

const UserForm = () => {
    const [state, setUser] = useState({name: "", email: ""});
  
    const {name, email} = state;
    const handleNameChange = (event) => {
      const {target: {value: name}} = event;
      setUser({name})
    }
  
    const handleEmailChange = (event) => {
      const { target: { value: email } } = event;
      // 这里不可以单独的设置某一个字段 新的状态必须与初始的状态类型保持一致
      setUser({ email });
    };
    return (
      <div>
        <input value={name} onChange={handleNameChange} />
        <input value={email} onChange={handleEmailChange} />
      </div>
    )
  }

export default Hooks